import type { IColumnsOption } from 'vc';
import { INDEX } from '@/utils/tableColumn';
import { toF9 } from '@/utils';
import { numToUnitNum } from '@vc/utils';

export function useTable(esgData, source) {
// 溯源弹窗
  const showActionsheet = ref(false);
  // 溯源弹窗数据
  const actionSheetData = ref<Record<string, any>>();
  const columns = ref<IColumnsOption[]>([]);
  watch(
    () => esgData.value?.indicators,
    (nv, ov) => {
      if (JSON.stringify(nv) !== JSON.stringify(ov)) {
        columns.value = [
          {
            field: 'seqIndex',
            title: '序号',
            width: 70,
            fixed: 'left',
            align: 'center',
            slots: {
              default: ({ row }) => {
                return row.seqIndex  ? row.seqIndex : ' ';
              }
            }
          },
          {
            field: 'securitiesCode',
            title: '股票代码',
            align: 'center',
            fixed: 'left',
            width: 110
          },
          {
            field: 'securitiesName',
            title: '股票简称',
            align: 'center',
            fixed: 'left',
            // sort: 'desc',
            width: 180,
            slots: {
              default: ({ row }) => {
                if (row.companyId) {
                  return <a class="companyName"
                            onClick={() => toF9(row.companyId)}>{row.securitiesName}</a>;
                } else {
                  return <span>{row.securitiesName}</span>;
                }
              }
            }
          }
        ];
        nv.forEach((item, index) => {
          columns.value.push({
            field: `indicator${index}`,
            title: item.name,
            align: 'center',
            width: 220,
            sortable: true,
            sortBy: item.code,
            slots: {
              default: ({ row }) => {
                const _value = row[`indicator${index}`]?.indicatorDisplayValue;
                const showJump = row[`indicator${index}`]?.fileUrl && (_value || _value === 0) && source.value;
                const remark =
                  _value &&
                  (row[`indicator${index}`]?.calcIndicatorRemark || row[`indicator${index}`]?.contentDescription);
                return (
                  <div>
                    <span onClick={() => goSource(row[`indicator${index}`], remark)}
                          style={showJump && row[`indicator${index}`].indicatorDisplayValue ? 'color: #1482f0;\n' +
                            'text-decoration: underline;\n' +
                            'cursor: pointer;\n' +
                            'text-underline-position: under;' : ''}
                          class={remark ? 'remark' : ''}>{row[`indicator${index}`] ? numToUnitNum(row[`indicator${index}`].indicatorDisplayValue) : '-'}</span>

                  </div>
                );
              }
              // header: ({column, columnIndex}) => {
              //   return (
              //     <span>
              //       <span style='display:block'>{column.title}</span>
              //       <span style='color:#666;font-weight:normal;'>{nv[columnIndex - 3].unit}</span>
              //     </span>
              //   );
              // }
            }
          });
        });
      }
    });


  function goSource(item, remark) {
    if (remark || (item.indicatorDisplayValue && source.value && item.fileUrl)) {
      item.year = item.statisticalPeriod;
      item.value = item.indicatorDisplayValue;
      actionSheetData.value = item;
      showActionsheet.value = true;
    }

  }

  return {
    columns,
    actionSheetData,
    showActionsheet
  };
}
